<template>
  <div id="app">
    <Navbar />
    <main>
      <section class="join-us">
        <h1>加入我们</h1>
        <form @submit.prevent="handleSubmit" class="join-form">
          <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" id="name" v-model="formData.name" placeholder="请输入您的姓名" required>
          </div>
          <div class="form-group">
            <label for="email">电子邮箱：</label>
            <input type="email" id="email" v-model="formData.email" placeholder="请输入您的电子邮箱" required>
          </div>
          <div class="form-group">
            <label for="phone">手机号码：</label>
            <input type="tel" id="phone" v-model="formData.phone" placeholder="请输入您的手机号码" required>
          </div>
          <div class="form-group">
            <label for="position">期望职位：</label>
            <input type="text" id="position" v-model="formData.position" placeholder="请输入您期望的职位">
          </div>
          <div class="form-group">
            <label for="message">个人简介：</label>
            <textarea id="message" v-model="formData.message" placeholder="请简要介绍一下自己"></textarea>
          </div>
          <button type="submit">提交</button>
        </form>
      </section>
    </main>
    <Footer />
  </div>
</template>

<script setup>
import Navbar from "@/components/Navbar/Navbar.vue";
import Footer from "@/components/Footer/Footer.vue";
import { ref } from 'vue';

// 定义表单数据
const formData = ref({
  name: '',
  email: '',
  phone: '',
  position: '',
  message: ''
});

// 表单提交处理函数
const handleSubmit = () => {
  // 这里可以添加表单提交后的逻辑，例如发送到后端服务器
  console.log('表单提交数据：', formData.value);
  // 可以在这里添加重置表单的逻辑
  formData.value = {
    name: '',
    email: '',
    phone: '',
    position: '',
    message: ''
  };
};
</script>

<style scoped>
/* 整体页面布局 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.join-us {
  padding: 40px;
}

.join-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>